<template>
  <header>
    <div class="inp">
      <input type="tel" placeholder="请输入城市名或地区名" v-model="keywords"/>
    </div>
    <div class="result" v-show="keywords !==''">
      <ul>
        <li class="border-bottom" v-for="item of resultList" :key="item.id">{{ item.name }}</li>
        <li v-show="resultList==''">没有找到该城市</li>
      </ul>
    </div>
  </header>
</template>

<script>
export default {
  props: {
    cities: Object
  },
  data () {
    return {
      keywords: '',
      resultList: [] // 搜索结果
    }
  },
  // 输入框输入值  keywords变化  监听keywords
  watch: {
    keywords () {
      let result = [] // 保存搜索结果
      for (let key in this.cities) { // key对象的属性名
        // console.log(this.cities[key])
        this.cities[key].forEach((obj, index) => {
          if (obj.spell.indexOf(this.keywords) !== -1 || obj.name.indexOf(this.keywords) !== -1) { // 如果obj.spell 包含this.keywords 将对象加到结果
            result.push(obj)
          }
        })
      }
      this.resultList = result
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
header
  display :flex
  background :#00bcd4
  height :0.88rem
  align-items :center
  .inp
    width 100%
    overflow auto
    padding 0 0.1rem
    margin-bottom 0.1rem
    >input
      width 100%
      height 0.70rem
      text-align center
      border-radius 0.1rem
  .result
    position absolute
    top 1.76rem
    right 0
    bottom 0
    left 0
    z-index 1
    background-color #BABABA
    >ul
      background-color #FFFFFF
      >li
        width 100%
        height 0.6rem
        line-height 0.6rem
        padding-left 0.2rem
</style>
